<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中小学教育培训</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="js/layer_mobile/need/layer.css">
    <link rel="stylesheet" href="js/swiper-6.1.2/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="container">
        <!-- 主页 -->
        <div id="home">
            <div class="home-header">
                <div class="city">北京</div>
                <div class="search">搜索：课程、机构</div>
                <div class="login">登录</div>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="img/banner_test.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/round01.jpg" alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="course">
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
                <a class="item" href="#">
                    <img width="40" src="img/class_art_icon.png" alt="">
                    <p>艺术</p>
                </a>
            </div>
            <div class="collage">
                <div class="col-title">
                    <span>更多学校</span>
                    <a href="/course.html">推荐学校</a>
                </div>
                <div class="col-list">
                    <a class="item" href="#">
                        <img src="/img/school_1.jpg" alt="">
                        <p>中考冲刺</p>
                    </a>
                    <a class="item" href="#">
                        <img src="/img/school_1.jpg" alt="">
                        <p>中考冲刺</p>
                    </a>
                    <a class="item" href="#">
                        <img src="/img/school_1.jpg" alt="">
                        <p>中考冲刺</p>
                    </a>
                    <a class="item" href="#">
                        <img src="/img/school_1.jpg" alt="">
                        <p>中考冲刺</p>
                    </a>
                </div>
            </div>
            <div class="time">
                <div class="time-title">
                    <span>限时抢报</span>
                    <a href="/course.html">更多优惠</a>
                </div>
                <div class="time-list">
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                        <div class="rest-time">距开抢5天24:50:23</div>
                    </a>
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                        <div class="rest-time">距开抢5天24:50:23</div>
                    </a>
                </div>
            </div>
            <div class="common" id="high_school">
                <div class="common-title">
                    <span>中小学</span>
                    <a href="/course.html">更多课程</a>
                </div>
                <div class="common-list">
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                    </a>
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                    </a>
                </div>
                <ul>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="common" id="art_sport">
                <div class="common-title">
                    <span>艺术/体育</span>
                    <a href="/course.html">更多课程</a>
                </div>
                <div class="common-list">
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                    </a>
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                    </a>
                </div>
                <ul>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="common" id="language">
                <div class="common-title">
                    <span>语言/留学</span>
                    <a href="/course.html">更多课程</a>
                </div>
                <div class="common-list">
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                    </a>
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                    </a>
                </div>
                <ul>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="common" id="train">
                <div class="common-title">
                    <span>拓展训练</span>
                    <a href="/course.html">更多课程</a>
                </div>
                <div class="common-list">
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                    </a>
                    <a class="item" href="#">
                        <div class="info">
                            <img src="/img/favorable_1.jpg" alt="">
                            <p>钢琴精品课</p>
                        </div>
                    </a>
                </div>
                <ul>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>高中语文</span>
                            <span>
                                <img src="/img/cls_icon_chaness.png" alt="">
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 分类 -->
        <div id="class">
            <div class="class-header">
                全部类别
                <a href="#"></a>
            </div>
            <div class="class-tabs">
                <div class="titles">
                    <div class="title active">艺术</div>
                    <div class="title">艺术</div>
                </div>
                <div class="lists">
                    <div class="list active">
                        <header><a href="">全部艺术课程</a></header>
                        <ul class="sub-class active">
                            <li>
                                <header>乐器<a href="javascript:void(0)"></a></header>
                                <ul>
                                    <li>全部</li>
                                    <li>全部</li>
                                    <li>全部</li>
                                    <li>全部</li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="sub-class">
                            <li>
                                <header>乐器<a href="javascript:void(0)"></a></header>
                                <ul>
                                    <li>全部</li>
                                    <li>全部</li>
                                    <li>全部</li>
                                    <li>全部</li>
                                </ul>
                            </li>
                        </ul>
                        <br><br><br><br><br><br><br>
                        <br><br><br><br><br><br><br>
                        <br><br><br><br><br><br><br>
                        <br><br><br><br><br><br><br>
                    </div>
                    <div class="list">
                        <header><a href="">全部艺术课程</a></header>
                        <ul class="sub-class active">
                            <li>
                                <header>乐器<a href="javascript:void(0)"></a></header>
                                <ul>
                                    <li>全部1</li>
                                    <li>全部</li>
                                    <li>全部</li>
                                    <li>全部</li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="sub-class">
                            <li>
                                <header>乐器<a href="javascript:void(0)"></a></header>
                                <ul>
                                    <li>全部</li>
                                    <li>全部</li>
                                    <li>全部</li>
                                    <li>全部</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 购物车 -->
        <div id="cart">购物车</div>
        <!-- 我的 -->
        <div id="my">

            <div class="my-header">
                <div class="user">
                    <p><img src="img/con_lft_tp.jpg" alt=""></p>
                    <h2>小仙女豆豆</h2>
                    <span class="pay_num">余额：¥102.32</span>
                </div>
                <a href="javascript:void(0);" class="logout" id="logout">退出</a>
            </div>

            <div class="my-order">
                <p>我的订单<a href="#">全部订单</a></p>
                <ul>
                    <li><a href="#" class="pay">待付款</a></li>
                    <li><a href="#" class="comment">待评价</a></li>
                    <li><a href="#" class="cancel">已取消</a></li>
                </ul>
            </div>

            <div class="business">
                <ul>
                    <li>
                        <p>
                            家长交流
                            <a href="#">聊天室</a>
                        </p>
                    </li>
                    <li>
                        <p>
                            我的钱包
                            <a href="#">孩子信息</a>
                        </p>
                    </li>
                    <li>
                        <p>
                            我的优惠
                            <a href="#">试听课程</a>
                        </p>
                    </li>
                </ul>

                <ul class="setting">
                    <li>
                        <p>
                            常用设置
                            <a href="#">设置</a>
                        </p>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <ul class="tabs" id="tabs">
        <li class="home">
            <i class="icon icon-home active"></i>
            <span>首页</span>
        </li>
        <li class="class">
            <i class="icon icon-class"></i>
            <span>分类</span>
        </li>
        <li class="cart">
            <i class="icon icon-cart"></i>
            <span>购物车</span>
        </li>
        <li class="my">
            <i class="icon icon-my"></i>
            <span>我的</span>
        </li>
    </ul>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <script src="js/purl.min.js"></script>
    <script src="js/layer_mobile/layer.js"></script>
    <script src="js/swiper-6.1.2/swiper-bundle.min.js"></script>

    <script>
        $(function () {
            // 页面第一次渲染时，先获取一下登录状态
            let isLogin = $.cookie('phone');
            // 获取当前激活选项卡
            let active = $.cookie('activeTab');

            // 底部选项卡逻辑
            $('#tabs li').click(function () {
                // 所有的i标签移除active类名
                $('#tabs li i').removeClass('active');
                // 当前点击的i标签添加active类名。
                $(this).find('i').addClass('active');

                // 判断是否点击了购物车
                if ($(this).hasClass('cart')) {
                    // 重新获取登录状态，双保险
                    isLogin = $.cookie('phone');
                    if (!isLogin) {
                        // 跳转登录页面去登录 returnValue=cart目的是在登录页面登录成功后，重新跳转回来的地址
                        location.href = 'login.html?returnValue=cart';
                        return;
                    }
                }

                $('#home,#class,#cart,#my').hide();
                $(`#` + $(this).attr('class')).show();
                // 使用cookie保证一下，当前激活的选项卡
                $.cookie('activeTab', $(this).attr('class'));
            })

            // 刷新页面，激活某个选项卡
            if (active) {
                // 把四个容器先隐藏
                $('#home,#class,#cart,#my').hide();
                // 再把cookie中保存的选项卡显示
                $(`#` + active).show();

                // 先把所有选项卡中的i标签去除active
                $('#tabs li i').removeClass('active');
                // 再把cookie中保存的选项卡中的i标签添加active
                $(`#tabs li.${active} i`).addClass('active');
            } else {
                $('#home,#class,#cart,#my').hide();
                $('#home').show();
            }

            // 退出
            $('#logout').click(function () {
                $.removeCookie('phone');
                // $.cookie('phone', undefined);
                layer.open({
                    content: '退出成功',
                    skin: 'msg',
                    time: 2
                });
            })

            // 事件委托
            $('.class-tabs').on('click', '.titles .title', function () {
                $('.titles .title').removeClass('active');
                $(this).addClass('active');

                $('.lists .list').removeClass('active');
                $('.lists .list').eq($(this).index()).addClass('active');
            })

            $('.class-tabs').on('click', '.sub-class header', function () {
                $(this).closest('.list').find('.sub-class').removeClass('active');
                $(this).closest('.sub-class').addClass('active');
            })

            // 读取mock对象  mock模拟 
            async function loadClass() {
                return await $.get('data/class.json');
            }

            loadClass().then(function (res) {
                // console.log(res);
                let classes = res.classes;

                let titles = '', lists = '', course = '';
                for (let i = 0; i < classes.length; i++) {
                    const cls = classes[i];
                    titles += `<div class="title ${i == 0 ? 'active' : ''}">${cls.name}</div>`;
                    if (cls.isShow) {
                        course += `<a class="item" href="/course.html?name=${cls.name}&flag=3">
                            <img width="40" src="${cls.icon}" alt="">
                            <p>${cls.name}</p>
                        </a>`;
                    }

                    lists += `<div class="list ${i == 0 ? 'active' : ''}">
                        <header style="background-image:url(${cls.bgImg})"><a href="">全部${cls.name}课程</a></header>`;

                    for (let j = 0; j < cls.sub_classes.length; j++) {
                        const sub_class = cls.sub_classes[j];

                        lists += `<ul class="sub-class ${j == 0 ? 'active' : ''}">
                            <li>
                                <header>${sub_class.name}<a href="javascript:void(0)"></a></header>
                                <ul>`;

                        for (let k = 0; k < sub_class.lists.length; k++) {
                            const list = sub_class.lists[k];
                            lists += `<li><a href="/course.html?name=${list.name}&flag=31">${list.name}</a></li>`;
                        }

                        lists += `</ul>
                            </li>
                        </ul>`;

                    }
                    lists += `</div>`;
                }
                // console.log(titles);
                // console.log(lists);

                course += `<a class="item" href="/course.html?name=全部&flag=3">
                            <img width="40" src="/img/class_sheng_icon.png" alt="">
                            <p>更多</p>
                        </a>`;

                $('.class-tabs .titles').html(titles);
                $('.class-tabs .lists').html(lists);
                $('#home .course').html(course);

            });


            $('#home .login').text(isLogin ? '退出' : '登录')
            $('#home .login').click(function () {
                isLogin = $.cookie('phone');
                if (isLogin) {
                    $.removeCookie('phone');
                    layer.open({
                        content: '退出成功',
                        skin: 'msg',
                        time: 2
                    });
                    $('#home .login').text('登录');
                    return;
                }
                location.href = "login.html";
            })

            var mySwiper = new Swiper('.swiper-container', {
                loop: true,
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination',
                }
            })

            // 加载更多学校
            async function loadCollage() {
                return await $.get('data/collage.json');
            }

            loadCollage().then(function (res) {
                // console.log(res);
                let collage = res.collage;
                let html = ``;
                for (let i = 0; i < collage.length; i++) {
                    const col = collage[i];
                    html += `<a class="item" href="/course.html?name=${col.name}&flag=1">
                        <img src="${col.img}" alt="">
                        <p>${col.name}</p>
                    </a>`
                }
                $('#home .collage .col-list').html(html)
            })

            // 加载限时抢购
            async function loadLimitTime() {
                return await $.get('data/limit-time.json');
            }

            loadLimitTime().then(function (res) {
                // console.log(res);
                let limitTime = res.limit_time;
                let html = ``;
                for (let i = 0; i < limitTime.length; i++) {
                    const lt = limitTime[i];
                    html += `<a class="item" href="/course.html?name=${lt.name}&flag=2">
                        <div class="info">
                            <img src="${lt.img}" alt="">
                            <p>${lt.name}</p>
                        </div>
                        <div class="rest-time">距开抢5天24:50:23</div>
                    </a>`
                }
                $('#home .time .time-list').html(html)
            })

            // 加载中小学，艺术/体育，语言/留学，拓展训练等推广课程
            async function loadCommon() {
                return await $.get('/data/popularize-course.json')
            }

            loadCommon().then(function (res) {
                console.log(res);
                let high_school = res.p_course.high_school;
                let art_sport = res.p_course.art_sport;
                let language = res.p_course.language;
                let train = res.p_course.train;
                showInfo(high_school, '#high_school');
                showInfo(art_sport, '#art_sport');
                showInfo(language, '#language');
                showInfo(train, '#train');

            })

            function showInfo(data, container) {
                let html = ``, li = ``;
                for (let i = 0; i < data.part1.length; i++) {
                    const obj = data.part1[i];
                    html += `<a class="item" href="/course.html?name=${obj.name}&flag=2">
                        <div class="info">
                            <img src="${obj.img}" alt="">
                            <p>${obj.name}</p>
                        </div>
                    </a>`
                }
                for (let i = 0; i < data.part2.length; i++) {
                    const obj = data.part2[i];
                    li += `<li>
                        <a href="/course.html?name=${obj.name}&flag=2">
                            <span>${obj.name}</span>
                            <span>
                                <img src="${obj.img}" alt="">
                            </span>
                        </a>
                    </li>`
                }
                $(`#home ${container} .common-list`).html(html);
                $(`#home ${container} ul`).html(li);
            }

            $('#home .home-header .city,#home .home-header .search').click(function () {
                location.href = "course.html";
            })



        })
    </script>
</body>

</html>